<template>
    <van-tabbar v-model="active" :border='true' route>
      <van-tabbar-item  v-for="icon in icons" :key="icon.id" :to='icon.url' :badge="icon.badge">
        <span>{{icon.text}}</span>
        <template #icon="props">
          <img :src="props.active ? icon.active : icon.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
</template>
<script>
import tabBarHome from "../../assets/tabBar-home.png";
import tabBarHomeGray from "../../assets/tabBar-home-gray.png";
import tabBarMenu from "../../assets/tabBar-menu.svg";
import tabBarMenuGray from "../../assets/tabBar-menu-gray.svg";
import tabBarOwner from "../../assets/tabBar-owner.svg";
import tabBarOwnerGray from "../../assets/tabBar-owner-gray.svg";
import tabBarOrder from "../../assets/tabBar-order.svg";
import tabBarOrderGray from "../../assets/tabBar-order-gray.svg";
import tabBarCart from "../../assets/tabBar-cart.svg";
import tabBarCartGray from "../../assets/tabBar-cart-gray.svg";
export default {
  data() {
    return {
        active: 0,
        icons: [
            {
                id:1,
                active: tabBarHome,
                inactive: tabBarHomeGray,
                text: '首页',
                url:'/home',
                badge:''
            },
            {
                id:2,
                active: tabBarMenu,
                inactive: tabBarMenuGray,
                text: '菜单',
                url:'/menu',
                badge:''
            },
            {
                id:3,
                active: tabBarOrder,
                inactive: tabBarOrderGray,
                text: '订单',
                url:'/order',
                badge:''
            },
            {
                id:4,
                active: tabBarCart,
                inactive: tabBarCartGray,
                text: '购物车',
                url:'/cart',
                badge:'5'
            },
            {
                id:5,
                active: tabBarOwner,
                inactive: tabBarOwnerGray,
                text: '我的',
                url:'/owner',
                badge:''
            },
        ],
    }
  }
};
</script>
<style lang="less">
.van-hairline--top-bottom{
    background-color: #f8f8f8;
    img{
        max-width: 100%;
        width: auto!important;
    }
    .van-tabbar-item--active{
        .van-tabbar-item__text{
            span{
                color: #2b4c7e;
            }
        }
    }
}
</style>